<template>
  <div class="proDetail-container">
    <div>
      <el-form
        ref="formRef"
        class="form-container"
        label-position="left"
        label-width="135px"
        :model="detail"
        :rules="rules"
      >
        <!-- <el-form-item label="编号">
          <span>{{ detail.id || 0 }}</span>
        </el-form-item> -->
        <div class="form-item left">
          <el-form-item label="内部编码 (#pi)">
            <el-input
              v-model="detail.innerCode"
              prop="innerCode"
              style="width: 350px"
            />
          </el-form-item>
          <el-form-item label="条形码 (#pc)" prop="code">
            <el-input v-model="detail.code" style="width: 350px" />
          </el-form-item>
          <el-form-item label="商品名称 (#pn)" prop="name">
            <el-input v-model="detail.name" style="width: 350px" />
          </el-form-item>
          <el-form-item label="规格 (#ps)" prop="spec">
            <el-input v-model="detail.spec" style="width: 350px" />
          </el-form-item>
          <el-form-item label="级别 (#pg)" prop="grade">
            <el-input v-model="detail.grade" style="width: 350px" />
          </el-form-item>
          <el-form-item label="单位 (#pu)" prop="unit">
            <el-input v-model="detail.unit" style="width: 350px" />
          </el-form-item>
          <el-form-item label="价格 (#pp)" prop="price">
            <el-input-number
              v-model="detail.price"
              :precision="2"
              :step="0.1"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="会员价（#vp）" prop="vipPrice">
            <el-input-number
              v-model="detail.vipPrice"
              :precision="2"
              :step="0.1"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="原价(#pop) " prop="originPrice">
            <el-input-number
              v-model="detail.originPrice"
              :precision="2"
              :step="0.1"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="产地 (#po)">
            <el-input v-model="detail.origin" style="width: 350px" />
          </el-form-item>
          <el-form-item label="售货员 (#pm)">
            <el-input v-model="detail.vendeur" style="width: 350px" />
          </el-form-item>
          <el-form-item label="促销类型">
            <el-select v-model="detail.promotion" placeholder="请选择">
              <el-option
                v-for="item in promotionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-item right">
          <el-form-item label="自定义1 (#f1)">
            <el-input v-model="detail.field1" style="width: 350px" />
          </el-form-item>
          <el-form-item label="自定义2 (#f2)">
            <el-input v-model="detail.field2" style="width: 350px" />
          </el-form-item>
          <el-form-item label="自定义3 (#f3)">
            <el-input v-model="detail.field3" style="width: 350px" />
          </el-form-item>
          <el-form-item label="二维码地址 (#f4)">
            <el-input v-model="detail.field4" style="width: 350px" />
          </el-form-item>
          <el-form-item label="型号图片地址 (#f5)">
            <el-input v-model="detail.field5" style="width: 350px" />
          </el-form-item>
          <el-form-item label="自定义6 (#f6)">
            <el-input v-model="detail.field6" style="width: 350px" />
          </el-form-item>
          <el-form-item label="库存 (#kc)">
            <el-input-number
              v-model="detail.storage"
              :min="0"
              :precision="0"
              :step="1"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="库存阈值">
            <el-input-number
              v-model="detail.storageThreshold"
              :min="0"
              :precision="0"
              :step="1"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="detail.status"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <!-- <el-form-item label="是否同步">
            <el-switch
              v-model="detail.isSync"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item> -->
          <el-form-item label="图片">
            <ImgUpload
              :image-url="detail.customImage"
              @success="uploadSuccess"
            />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="btns">
      <ElButton class="btn mr20" type="primary" @click="save">保存</ElButton>
      <ElButton class="btn" @click="cancel">取消</ElButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { getpro, proedit } from '@/api/mupro'
  import router from '@/router'
  import ImgUpload from '@/views/components/imgUpload/index.vue'

  const rules = reactive({
    innerCode: [
      {
        required: true,
        message: '请填写条形码',
        trigger: 'blur',
      },
    ],
    name: [
      {
        required: true,
        message: '请填写商品名称',
        trigger: 'blur',
      },
    ],
    unit: [
      {
        required: true,
        message: '请填写商品单位',
        trigger: 'blur',
      },
    ],
    price: [
      {
        required: true,
        message: '请填写商品价格',
        trigger: 'blur',
      },
    ],
    vipPrice: [
      {
        required: true,
        message: '请填写商品会员价',
        trigger: 'blur',
      },
    ],
    originPrice: [
      {
        required: true,
        message: '请填写商品原价',
        trigger: 'blur',
      },
    ],
  })
  const promotionList = ref([
    {
      label: 'Normal',
      value: '1',
    },
    {
      label: 'VIP',
      value: '2',
    },
    {
      label: 'Promotion',
      value: '3',
    },
    {
      label: 'Limit',
      value: '4',
    },
  ])
  const route = useRoute()
  const id: any = ref('0')
  const init = async () => {
    if (route.query && route.query.ID) {
      id.value = route.query.ID
    }
  }
  const detail: any = ref({})
  const getDetail = async () => {
    const {
      data: { data },
      code,
    } = await getpro({
      id: id.value,
    })
    detail.value = data
    console.log(detail.value)
  }
  init().then(() => {
    if (id.value && id.value !== '0') {
      getDetail()
    }
  })
  const uploadSuccess = (url: string) => {
    detail.value.customImage = url
  }
  const formRef: any = ref(null)
  const save = async () => {
    await formRef.value.validate(async (valid: any) => {
      if (valid) {
        const { code } = await proedit(detail.value)
        if (code == 200) {
          router.back()
        }
      }
    })
  }
  const cancel = () => {
    router.back()
  }
</script>

<style lang="scss" scoped>
  .proDetail-container {
    .form-container {
      display: flex;
      justify-content: space-around;

      .form-item {
        width: 40%;
        padding: 14px 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
      }
    }
    .btns {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      .mr20 {
        margin-right: 10px;
      }
    }
  }
</style>
